﻿<meta http-equiv="X-UA-Compatible" content="IE=8" />
@using System.Configuration
@using System.IO
@model Siser.Web.Models.Pieza

@{
    //DateTime fechaFicha = Model.EquiposPiezas.First().Pieza.Mediciones.First().Fecha;
    DateTime fechaFicha = DateTime.Now;
    string actionUrl = @Url.Action("GetMediciones", "Pieza", new {id = Model != null ? Model.Id : 0});
    
    string urlObtenerReportes = "";
    // No se debe dejar dijo el nombre del sistema ya que puede ser cambiado, se sugiere agregar un valor fijo en la base de datos
    int pEmpresa = Model.EquiposPiezas.First().Equipo.Instalacion.Planta.EmpresaId;
    int pRegion = Model.EquiposPiezas.First().Equipo.Instalacion.Planta.RegionId;
    int pArea = Model.EquiposPiezas.First().Equipo.Instalacion.PlantaId;
    
    if (Model.EquiposPiezas.Where(ep => ep.FechaFin == null).FirstOrDefault() != null &&
        (Model.EquiposPiezas.Where(ep => ep.FechaFin == null).First().Equipo.Sistema.Nombre.Equals("Fijo", StringComparison.CurrentCultureIgnoreCase) || Model.EquiposPiezas.Where(ep => ep.FechaFin == null).First().Equipo.Sistema.Nombre.Equals("Protección+Fijo", StringComparison.CurrentCultureIgnoreCase)))
    {
        int pPieza =  Model.EquiposPiezas.First().PiezaId;
        int pEquipo = Model.EquiposPiezas.First().EquipoId;
        int pInstalacion = Model.EquiposPiezas.First().Equipo.InstalacionId;
        


        int[] param = { pPieza, pEquipo, pInstalacion, pArea, pEmpresa, pRegion };
        urlObtenerReportes = Url.Action("ReportePorEquipo/", "Reporte", 
                                        new { idPieza = pPieza,
                                              idEquipo = pEquipo,
                                              idInstalacion = pInstalacion,
                                              idArea = pArea,
                                              idEmpresa = pEmpresa,
                                              idRegion = pRegion });
        
        
    }
    else
    {
        urlObtenerReportes = Url.Action("ReporteAmbiental", "Reporte", new {idArea = pArea, 
                                                                            idEmpresa = pEmpresa, 
                                                                            idRegion = pRegion});
    }
        
    
    ViewBag.Title = "Ficha monitoreo en línea";
}
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/excanvas.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqplot.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.highlighter.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.dateAxisRenderer.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.canvasOverlay.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.canvasAxisLabelRenderer.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jqplot.canvasTextRenderer.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/base/jquery.jqplot.min.css")" rel="stylesheet" type="text/css" />

<div id="tag">
    <div class="ficha-monitoreo-borde">
        <div class="ficha-monitoreo-titulo">TAG</div>
    </div>
    <div class="ficha-monitoreo-contenido-imagen">
        <img id="ficha-monitoreo-imagen" src='@Path.Combine(ConfigurationManager.AppSettings["PathImagenPieza"], Model.Id+".JPG")' alt=""/>
    </div>
</div>
<div id="variables-radiologicas">
    <div class="ficha-monitoreo-borde">
        <div class="ficha-monitoreo-titulo">Variables radiológicas</div>
    </div>
    <div class="ficha-monitoreo-contenido">
        <div style="clear: both; height: 38px;">
            <div style="margin: 0 15px 0 15px; float: left;">
                <b>Distancia</b><div id="distancia" style="text-align: center;">---</div>
            </div>

            <div style="margin: 0 15px 0 15px; float: left;">
                <b>Dosis recibida</b><div id="dosis-recibida" style="text-align: center;">---</div>
            </div>        

            <div style="margin: 0 15px 0 15px; float: left;">
                <b>Tiempo de exposición</b><div id="tiempo-exposicion" style="text-align: center;">---</div>
            </div>
        </div>
    
        <div style="clear: both; height: 38px;">
            <div style="margin: 0 10px 0 90px; float: left;">
                <b>Máximo</b><div id="maximo" style="text-align: center;"></div>
            </div>
            
            <div style="margin: 0 10px 0 10px; float: left;">
                <b>Mínimo</b><div id="minimo" style="text-align: center;"></div>
            </div>            
                
            <div style="margin: 0 auto 0 10px; float: left;">
                <b>Promedio</b><div id="promedio" style="text-align: center;"></div>
            </div>
        </div>

        <div style="clear: both; height: 38px;">
            <div style="margin: 0 120px 0 120px;">
                <b>Desviación estándar</b><div id="desviacion-estandar" style="text-align: center;"></div>
            </div>
        </div>
    </div>
</div>
<div id="limites-dosis">
    <div class="ficha-monitoreo-borde">
        <div class="ficha-monitoreo-titulo">Limites de dosis</div>
    </div>
    <div class="ficha-monitoreo-contenido">
        <div style="line-height: 40px; margin: auto 0 auto 10px;">
            <span style="display: block; width: 120px; font-weight: bold; float: left;">Dosis anual</span><span>---</span>
        </div>

        <div style="line-height: 40px; margin: auto 0 auto 10px;">
            <span style="display: block; width: 120px; font-weight: bold; float: left;">Dosis diaria</span><span>---</span>
        </div>
    
        <div style="line-height: 40px; margin: auto 0 auto 10px;">
            <span style="display: block; width: 120px; font-weight: bold; float: left;">Tasa exposición</span><span>---</span>
        </div>
    </div>
</div>
<div id="estado-linea">
    <div class="ficha-monitoreo-borde">
        <div class="ficha-monitoreo-titulo">Estado en línea</div>
    </div>
    <div class="ficha-monitoreo-contenido-estado-linea">
        <div style="line-height: 40px; margin: auto 0 auto 10px;">
            <span style="display: block; width: 50px; font-weight: bold; float: left;">Estado</span><span id="estado">Sin Información</span>
        </div>

        <div style="line-height: 40px; margin: auto 0 auto 10px;">
            <span style="display: block; width: 120px; font-weight: bold; float: left;">Medición</span><span id="ultima-medicion">Sin Información</span>
        </div>

        <div style="line-height: 40px; margin: auto 0 auto 10px;">
            <span style="display: block; width: 120px; font-weight: bold; float: left;">Nivel referencia</span><img id="nivel-referencia" alt="Nivel referencia" src='@Url.Content("~/Content/images/alarmas/sin-informacion.png")'/>
        </div>

        <div style="line-height: 40px; margin: auto 0 auto 10px;">
            <span style="display: block; width: 120px; font-weight: bold; float: left;">Puerta</span><img id="puerta" alt="Estado puerta" src='@Url.Content("~/Content/images/alarmas/sin-informacion.png")'/>
        </div>

        <div style="line-height: 40px; margin: auto 0 auto 10px;">
            <span style="display: block; width: 120px; font-weight: bold; float: left;">Energía</span><img id="energia" alt="Estado energía" src='@Url.Content("~/Content/images/alarmas/sin-informacion.png")'/>
        </div>
    </div>
</div>
<div id="grafico">
    <div class="ficha-monitoreo-borde">
        <div class="ficha-monitoreo-titulo">Gráfico&nbsp @Model.Nombre</div>
    </div>
    <div class="ficha-monitoreo-contenido-grafico">
        <div id="chart" style="height:240px; width:400px;"></div>
    </div>
</div>
<div id="actualizacion">
    <div class="ficha-monitoreo-borde">
        <div class="ficha-monitoreo-titulo">Actualización</div>
    </div>
    <div class="ficha-monitoreo-contenido-actualizacion">
        <div style="line-height: 40px; margin: auto 0 auto 10px;">
            <span style="display: block; width: 120px; font-weight: bold; float: left;">Tiempo restante:</span><span id="remaining-time">---</span>
        </div>
        <div style="line-height: 40px; margin: auto 0 auto 10px;">
            <span style="display: block; width: 120px; font-weight: bold; float: left;">Última medición:</span><span id="hora-ultima-medicion">---</span>
        </div>
        <div style="line-height: 40px; margin: auto 0 auto 10px;">
            <span style="display: block; width: 120px; font-weight: bold; float: left;">Diferencia:</span><span id="diferecia">---</span>
        </div>
        <div style="line-height: 80px; margin: auto 0 auto 10px;" class="division">
            <a href="@urlObtenerReportes">Obtener reportes</a>
        </div>
    </div>
</div>
<div id="informacion-equipo">
    <div class="ficha-monitoreo-borde">
        <div class="ficha-monitoreo-titulo">Información detector</div>
    </div>
    <div class="ficha-monitoreo-contenido-informacion">
        <div style="clear: both; height: 30px;">
            <div style="width:160px; float: left; text-align:center;">
                <b>Tipo detector</b><div>@String.Format("{0} {1}", Model.Marca, Model.Modelo)</div>
            </div>

            <div style="width:160px; float: left; text-align:center;">
                <b>Modelo</b><div>@Model.Modelo</div>
            </div>        

            <div style="width:160px; float: left; text-align:center;">
                <b>Marca</b><div>@Model.Marca</div>
            </div>
        </div>

        <div style="clear: both; height: 30px;">
            <div style="width:240px; float: left; text-align:center;">
                <b>Seteo nivel investigación</b><div>@String.Format("{0} {1}", Model.NivelDeclaracionAlarma.ValorInvestigacion, Model.Unidad.Nombre)</div>
            </div>

            <div style="width:240px; float: left; text-align:center;">
                <b>Seteo nivel intervención</b><div>@String.Format("{0} {1}", Model.NivelDeclaracionAlarma.ValorIntervencion, Model.Unidad.Nombre)</div>
            </div>        
        </div>

        <div style="clear: both; height: 30px;">
            <div style="width:240px; float: left; text-align:center;">
                <b>Última mantención</b><div>---</div>
            </div>

            <div style="width:240px; float: left; text-align:center;">
                <b>Última calibración</b><div>---</div>
            </div>        
        </div>
    </div>
</div>
<div id="contacto">
    <div class="ficha-monitoreo-borde">
        <div class="ficha-monitoreo-titulo">Contacto</div>
    </div>
    <div class="ficha-monitoreo-contenido-informacion">
        <div style="clear: both; height: 60px;">
            <div style="width:240px; float: left; text-align: center;">
                <b>Jefe instalación</b><div style="text-align: center;">@String.Format("{0} {1} {2}", Model.EquiposPiezas.First().Equipo.Instalacion.Encargado.Nombre,
                                                                                                        Model.EquiposPiezas.First().Equipo.Instalacion.Encargado.ApellidoPaterno,
                                                                                                        Model.EquiposPiezas.First().Equipo.Instalacion.Encargado.ApellidoMaterno)</div>
            </div>

            <div style="width:240px; float: left; text-align: center;">
                <b>Correo electrónico</b><div style="text-align: center;">@Model.EquiposPiezas.First().Equipo.Instalacion.Encargado.CorreoElectronico</div>
            </div>        
        </div>

            <div style="clear: both; height: 60px;">
            <div style="width:240px; float: left; text-align: center;">
                <b>Teléfono (1)</b><div style="text-align: center;">@Model.EquiposPiezas.First().Equipo.Instalacion.Encargado.Telefono1</div>
            </div>

            <div style="width:240px; float: left; text-align: center;">
                <b>Teléfono (2)</b><div style="text-align: center;">@Model.EquiposPiezas.First().Equipo.Instalacion.Encargado.Telefono2</div>
            </div>        
        </div>
    </div>
</div>
<div id="alarmas">
    <div class="ficha-monitoreo-borde">
        <div class="ficha-monitoreo-titulo">Alarmas</div>
    </div>
    <div class="ficha-monitoreo-contenido-informacion">
        <div style="clear: both; height: 60px;">
            <div style="width:240px; float: left;display:none; border:solid" id="parp1">
            <a href="@urlObtenerReportes"  style="font-size:x-large; line-height:50px" id="parp2"><img src="../../Content/images/Logo Sin energia.bmp" style="float:left; margin-right:10px" height=60px/>Sin energía</a>
            </div>

            <div style="width:240px; float: left;float: left;display:none; border:solid" id="inves1">
            <a href="@urlObtenerReportes"  style="font-size: x-large; line-height:50px" id="inves2"><img src="../../Content/images/investigacion.jpg" style="float:left; margin-right:10px" height=60px/>Investigación</a>
            </div>
            
            <div style="width:240px; float: left;float: left;display:none; border:solid" id="inter1">
            <a href="@urlObtenerReportes"  style="font-size: x-large; line-height:50px" id="inter2"><img src="../../Content/images/intervencion.jpg" style="float:left; margin-right:10px" height=60px/>Intervención</a>
            </div>         
        </div>

            <div style="clear: both; height: 60px;">
            <div style="width:240px; float: left; text-align: center;">

            </div>

            <div style="width:240px; float: left; text-align: center;">

            </div>        
        </div>
    </div>
</div>


<script type="text/javascript">
    $(document).ready(function () {
        var s = 0;
        var now = new Date(2000, 1, 1, 0, 20, 0, 0); // 20 min en estado normal
        var plot;
        LoadMediciones();

        var interval = setInterval(StartRemainingTime, 1000);

        setInterval(function () {
            clearInterval(interval);
            s = 0;

            $.ajax({
                type: "POST",
                timeout: 30000,
                url: '@actionUrl',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var serie = [];
                    $(data.Mediciones).each(function (i, item) {
                        serie.push([new Date(parseInt(item.Fecha.substr(6))), parseFloat(item.Valor)]);
                    });
                    plot.series[0].data = serie;
                    plot.replot();

                    LoadData(data);
                }
            });

            interval = setInterval(StartRemainingTime, 1000);
        }, 1204000);
        //1202000); // 20 minutos + 2 seg

        function StartRemainingTime() {
            var minutes = now.getMinutes();
            var second = now.getSeconds() - s++;
            var d = new Date(2000, 1, 1, 0, minutes, second, 00);

            $('#remaining-time').text(d.toLocaleTimeString());
        }

        function LoadMediciones() {
            $.ajax({
                type: "POST",
                timeout: 30000,
                url: '@actionUrl',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    var serie = [];
                    $(data.Mediciones).each(function (i, item) {
                        serie.push([new Date(parseInt(item.Fecha.substr(6))), parseFloat(item.Valor)]);
                    });

                    plot = $.jqplot('chart', [serie], {
                        title: '@fechaFicha.ToString("dddd dd \\de MMMM yyyy")',
                        axesDefaults: {
                            labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                        },
                        grid: {
                            drawBorder: false,
                            shadow: false,
                            background: "#efefef"
                        },
                        axes: {
                            xaxis: {
                                label: 'Hora registro',
                                ticks: ['@fechaFicha.ToString("yyyy-MM-dd 00:00:00")',
                                        '@fechaFicha.ToString("yyyy-MM-dd 04:00:00")',
                                        '@fechaFicha.ToString("yyyy-MM-dd 08:00:00")',
                                        '@fechaFicha.ToString("yyyy-MM-dd 12:00:00")',
                                        '@fechaFicha.ToString("yyyy-MM-dd 16:00:00")',
                                        '@fechaFicha.ToString("yyyy-MM-dd 20:00:00")',
                                        '@fechaFicha.ToString("yyyy-MM-dd 23:59:59")'],
                                renderer: $.jqplot.DateAxisRenderer,
                                tickOptions: { formatString: "%H:%M" }
                            },
                            yaxis: {
                                label: 'Mediciones ' + data.Unidad,
                                min: 0,
                                //ticks: [0.0, 1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0],
                                tickOptions: { formatString: '%s' }
                            }
                        },
                        highlighter: {
                            show: true,
                            showMarker: true,
                            useAxesFormatters: true,
                            formatString: '%s,%s'
                        },
                        canvasOverlay: {
                            show: true,
                            objects: [
                            {
                                horizontalLine: {
                                    name: "nivelInvestigacion",
                                    y: data.ValorInvestigacion,
                                    color: "#FFFF00",
                                    xOffset: 0,
                                    shadow: false,
                                    showTooltip: false,
                                    tooltipFormatString: "Nivel de registro = %d"
                                }
                            }, {
                                horizontalLine: {
                                    name: "nivelIntervencion",
                                    y: data.ValorIntervencion,
                                    color: "#FF0000",
                                    //lineWidth: 5,
                                    xOffset: 0,
                                    shadow: false,
                                    showTooltip: false,
                                    tooltipFormatString: "Nivel de intervención = %d"
                                }
                            }]
                        }
                    });

                    LoadData(data);
                }
            });
        }

        function LoadData(data) {
            $("#estado").text(data.Estado);
            $("#ultima-medicion").text(data.UltimaMedicion + ' ' + data.Unidad);
            $("#hora-ultima-medicion").text(data.HoraUltimaMedicion);
            if (data.NivelReferencia == "REGISTRO")
                $("#nivel-referencia").attr("src", '@Url.Content("~/Content/images/alarmas/registro.png")');
            else
                if (data.NivelReferencia == "INVESTIGACION") {

                    $("#nivel-referencia").attr("src", '@Url.Content("~/Content/images/alarmas/investigacion.png")');
                    document.getElementById("inves1").style.display = 'block';
                    startBlink1();
                }
                else 
                {
                    $("#nivel-referencia").attr("src", '@Url.Content("~/Content/images/alarmas/intervencion.png")');
                    document.getElementById("inter1").style.display = 'block';
                    startBlink2();
                }
            if (data.Puerta == "CERRADA")
                $("#puerta").attr("src", '@Url.Content("~/Content/images/alarmas/puerta-cerrada.png")');
            else
                $("#puerta").attr("src", '@Url.Content("~/Content/images/alarmas/puerta-abierta.png")');

            if (data.Energia == "PRESENTE") {
                document.getElementById("parp1").style.display = 'none';
                $("#energia").attr("src", '@Url.Content("~/Content/images/alarmas/energia-presente.png")');
            }
            else {
                $("#energia").attr("src", '@Url.Content("~/Content/images/alarmas/energia-ausente.png")');
                document.getElementById("parp1").style.display = 'block';
                startBlink();
            }
            $("#maximo").text(data.Maximo + ' ' + data.Unidad);
            $("#minimo").text(data.Minimo + ' ' + data.Unidad);
            $("#promedio").text(data.Promedio + ' ' + data.Unidad);
            $("#desviacion-estandar").text(data.DesviacionEstandar + ' ' + data.Unidad);
        }
        function startBlink() {
            window.blinker = setInterval(function () {
                if (window.blink) {
                    $("#parp2").css('color', 'red');
                    window.blink = false;
                    var imagen = document.getElementById("parp2");
                    imagen.style.visibility = (imagen.style.visibility == "visible") ? "hidden" : "visible";
                }
                else {
                    $("#parp2").css('color', 'red');
                    window.blink = true;
                    var imagen = document.getElementById("parp2");
                    imagen.style.visibility = (imagen.style.visibility == "visible") ? "hidden" : "visible";
                }
            }, 500);
        }
        function startBlink1() {
            window.blinker = setInterval(function () {
                if (window.blink) {
                    $("#inves2").css('color', 'yellow');
                    window.blink = false;
                    var imagen = document.getElementById("inves2");
                    imagen.style.visibility = (imagen.style.visibility == "visible") ? "hidden" : "visible";
                }
                else {
                    $("#inves2").css('color', 'yellow');
                    window.blink = true;
                    var imagen = document.getElementById("inves2");
                    imagen.style.visibility = (imagen.style.visibility == "visible") ? "hidden" : "visible";
                }
            }, 500);
        }

        function startBlink2() {
            window.blinker = setInterval(function () {
                if (window.blink) {
                    $("#inter2").css('color', 'orange');
                    window.blink = false;
                    var imagen = document.getElementById("inter2");
                    imagen.style.visibility = (imagen.style.visibility == "visible") ? "hidden" : "visible";
                }
                else {
                    $("#inter2").css('color', 'orange');
                    window.blink = true;
                    var imagen = document.getElementById("inter2");
                    imagen.style.visibility = (imagen.style.visibility == "visible") ? "hidden" : "visible";
                }
            }, 500);
        }

        function stopBlink() {
            if (window.blinker) clearInterval(window.blinker);
        }

    });
</script>



<div class="division"><a href="javascript:history.back(1)" >Volver</a></div>